<!doctype html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8">

    <title>贤姐专用gpt</title>

    <link rel="icon" href="/favicon.ico">

    <style>
        .bd-navbar {
            background-color: #0a53be;
            display: flex;
            white-space: nowrap;
            text-align: center;
            width: 640px;
            margin: auto;

        }

        .title-navbar {
            margin-left: 20px;
        }

        .container {
            width: 640px;
            margin: auto;

        }

        .wellcome {
            font-size: 10px;
            text-align: right;

        }

        .chatgpt_say {

            font-size: 28px;
            text-align: left;
            margin-left: 20px;
        }

        .myself_say {
            font-size: 28px;
            text-align: right;
            margin-right: 20px;
        }


        .form-group {
            border-left: 50px;
        }

        #ask_chatgpt_35_stream {
            font-size: 28px;
            width: 480px;
            vertical-align: middle;
            height: 56px;
            border: 2px solid black;
            border-radius: 36px;
        }

        .etc_spoken {
            width: 88px;
        }

        #message_form {
            display: inline-block;
        }

        .btn {
            font-size: 28px;
            color: white;
            vertical-align: middle;
            height: 64px;
            width: 128px;
            border: 0;
            border-radius: 48px;
            background-size: cover;
            background-color: blue;
        }

    </style>
</head>

<body>


<header class="navbar navbar-expand navbar-dark  bd-navbar p-0 m-0 ">
    <h1 class="title-navbar">贤姐专用GP梯 3.2.4</h1>
</header>

<main role="main" class="container">
    <div class="row">
        <div class="d-flex justify-content-between my-3 p-3 bg-white rounded box-shadow">
            <div class="col-md-12 order-md-1">
                <div class="wellcome">
                    <p>欢迎贤姐使用 （发布于20231207） </p>
                </div>

                <hr/>
                <!--                <p>ChatGPT</p>-->
                <div>
                    <div id="history-dialogue">
<!--                        <div class="chatgpt_say">系统升级中，请狗狗稍等</div>-->
                    </div>
                    <p class="chatgpt_say" id="chatgpt_answer">ChatGPT：</p>
<!--                    <p class="myself_say" id="myself_say">333</p>-->
                    <!--                    <hr/>-->
                </div>
                <br/>
                <hr/>
                <div class="form-group">
                    <div class="etc_spoken"></div>

                    <form method="post" accept-charset="utf-8" id="message_form" name="difu_form">
                        <input class="form-control" cols="15" rows="4" name="ask_chatgpt_35_stream"
                               id="ask_chatgpt_35_stream"
                               placeholder="  贤姐想问啥？"></input>
                        <br/>
                    </form>
                    <button onclick="btn_send_gt_dt();" type="submit" class="btn btn-lg btn-primary ">
                        <b> <i>Send</i> </b>
                    </button>

                </div>
            </div>
        </div>
    </div>
</main>


<script language="JavaScript">
    function btn_send_gt_dt() {

        var url = '/ask_chatgpt_35_stream/';

        //设置往form表单中添的元素，name=value的方式，设置一个json数组对象
        var message = document.getElementById("ask_chatgpt_35_stream")
        var params = {
            "message": message,
            "model": "gpt-3.5-turbo",
            "role": "user",
        }

        document.getElementById("chatgpt_answer").innerHTML = "ChatGPT：";
        refresh_appear_text()
        put_info_to_history_appears()
        connectEventSource()

    }

    function connectEventSource() {
        let _this = this;
        var message = document.getElementById("ask_chatgpt_35_stream").value

        console.log(message)
        fetch('/ask_chatgpt_35_stream/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({message: message}),//请求参数
        }).then(response => {
            const reader = response.body.getReader();
            const decoder = new TextDecoder('utf-8');
            let buffer = '';

            function processStreamResult(result) {
                const chunk = decoder.decode(result.value, {stream: !result.done});
                buffer += chunk;
                //逐条解析后端返回数据
                const lines = buffer.split('\n');
                buffer = lines.pop();

                lines.forEach(line => {
                    if (line.trim().length > 0) {　　　　　　　　//后端返回数据格式：data:{a:'x'};不知道为什么会多出data:，处理一下
                        // console.log('Received:', line);


                        document.getElementById("chatgpt_answer").innerHTML = document.getElementById("chatgpt_answer").innerText + line;
                        // console.log('Received:', line.substring(line.indexOf('{')));
                        // const jsonData = line.substring(line.indexOf('{'));
                        //
                        // const eventData = JSON.parse(jsonData);
                        // _this.fileContent += eventData.result.message.content;
                        // console.log('Received:', _this.fileContent);
                    }
                });

                if (!result.done) {
                    return reader.read().then(processStreamResult);
                }
                    put_answer_to_history_appears()
            }

            return reader.read().then(processStreamResult);
        })
            .catch(error => {
                console.error('Error:', error);
            });
        // document.getElementById("ask_chatgpt_35_stream").value = "";

    }

    function refresh_appear_text() {
        var appear_text = "  贤姐想问啥？";
        switch (Math.floor(Math.random()*10)) {
            // case 1:
            //     appear_text = "  谁是世界上最美丽的人？"
            //     break;
            case 2:
                appear_text = "  贤姐今天怎么这么俊？"
                break;
            case 3:
                appear_text = "  你咋这么俊，怎么长的？"
                break;
            case 4:
                appear_text = "  你长的这么漂亮干啥？"
                break;
            case 5:
                appear_text = "  贤姐想问啥？"
                break;
            // case 6:
            //     appear_text = "  谁是世界上最美丽的人？"
            //     break;
            // case 7:
            //     appear_text = "  谁是世界上最美丽的人？"
            //     break;
            case 9:
                appear_text = "  贤姐想问啥？"
                break;
            case 10:
                appear_text = "  贤姐想问啥？"
                break;
            default:
                appear_text = "  贤姐想问啥？"
                break;

        }

        document.getElementById("ask_chatgpt_35_stream").setAttribute("placeholder" ,appear_text);

    }


    function put_info_to_history_appears() {
        let ask_history_div = document.getElementById("history-dialogue");
        var ask_just = document.createElement("div");
        ask_just.setAttribute("class", "chatgpt_say");
        ask_just.innerHTML = '<font color=\"#FF0000\">贤姐：</font> '+document.getElementById("ask_chatgpt_35_stream").value
        ask_history_div.appendChild(ask_just)

    }
    function put_answer_to_history_appears() {
        let ask_history_div = document.getElementById("history-dialogue");
        var ask_just = document.createElement("div");
        ask_just.setAttribute("class", "chatgpt_say");
        ask_just.innerHTML = document.getElementById("chatgpt_answer").textContent

        ask_history_div.appendChild(ask_just)
        document.getElementById("ask_chatgpt_35_stream").value = "";
        document.getElementById("chatgpt_answer").innerHTML = "";

    }
    function put_info_to_history() {
        var message = document.getElementById("ask_chatgpt_35_stream").value;

        console.log(message)
    }

    function btn_reset_txt_area() {
        document.getElementById("ask_chatgpt_35_stream").value = "";
        return false;
    }
</script>

</body>

</html>